<template>
	<view class="content">
		<u-input v-model="city" type="select" :placeholder="text" @click="showCity = true" />

		<u-select v-model="showCity" mode="mutil-column-auto" :list="cityList" @confirm="confirm"></u-select></u-select>
	</view>

</template>

<script>
	export default {
		props: {
			text: {
				type: String,
				default: "请选择地区",
			},
		},
		data() {
			return {
				showCity: false,
				cityList: [],
				city: "",
				cityParam: {
					"accountProvince": "",
					"accountCity": "",
					"accountArea": ""
				}
			}
		},
		mounted() {
			this.getCity();
		},
		methods: {
			confirm(e) {
				let city = ""
				const _that = this;
				e.forEach(function(item, index, array) {

					city += item.label + ' ';
					if (index == 0) {
						_that.cityParam.accountProvince = item.value;
					} else if (index == 1) {
						_that.cityParam.accountCity = item.value;
					} else {
						_that.cityParam.accountArea = item.value;
					}
				});
				this.city = city;
				this.$emit("success", _that.cityParam);
			},
			getCity() {
				const _that = this;
				_that.$zx.common_api.listProvinceCityArea().then((data) => {


					_that.cityList = data;
					_that.cityList.forEach(function(item, index_1, array) {

						_that.$set(item, 'value', item.code);
						_that.$set(item, 'label', item.name);

						if (item.hasChildren) {
							item.children.forEach(function(city, index_2, array) {

								_that.$set(city, 'value', city.code);
								_that.$set(city, 'label', city.name);
								if (city.hasChildren) {
									city.children.forEach(function(distinct, index_3, array) {

										_that.$set(distinct, 'value', distinct.code);
										_that.$set(distinct, 'label', distinct.name);
									});
								}
							});
						}

					});

				});
			},
		}
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;
	}
</style>